<template>
    <el-table ref="table" :data="props.data" table-layout="auto" size="small" border class="table">
        <el-table-column label="层数" min-width="100">
            <template #default="scope">
                <el-input-number v-model="scope.row.floor" size="small" controls-position="right" placeholder="层数" />
            </template>
        </el-table-column>
        <el-table-column label="状态" width="100">
            <template #default="scope">
                <el-select v-model="scope.row.status" size="small" placeholder="请选择状态" style="width:100%">
                    <el-option label="禁用" :value="0" />
                    <el-option label="启用" :value="1" />
                </el-select>
            </template>
        </el-table-column>
        <el-table-column label="对应站点" width="130">
            <template #default="scope">
                <el-select v-model="scope.row.staid" size="small" placeholder="对应站点" style="width:100%">
                    <el-option
                    v-for="item in stationSelect"
                    :key="item.stationid"
                    :label="item.stationname"
                    :value="item.stationid"
                    />
                </el-select>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="80">
            <template #default="scope">
                <el-button type="success" :icon="Plus" size="small" circle @click="addCrood(scope.$index)" />
                <el-button type="danger" :icon="Close" size="small" circle @click="DeleteCrood(scope.$index)" />
            </template>
        </el-table-column>
    </el-table>
</template>

<script lang='ts' setup>
import { ref, watch } from 'vue'
import { message } from "@/utils/message";
import { Plus, Close } from '@element-plus/icons-vue' 

const props = defineProps({
    data:{
        type: Array<any>,
        required: true,
        default: [{}]
    },
    stationSelect:{
        type: Array<any>,
        required: true,
        default: [{}]
    }
})

const table = ref()

// 新增交管坐标
function addCrood(i) {
  table.value.data.splice(i + 1, 0, {status:1})
}

// 删除交管坐标
function DeleteCrood(i) {
    if (table.value.data.length === 1) {
        table.value.data.splice(i, 1, {})
        message(`最后一条数据不能删除！`, {
            type: "error"
        });
    }else{
        table.value.data.splice(i, 1)
    }
}

</script>

<style lang="scss" scoped>
.table{
    width: 100%;
}
</style>